import React, { memo, useEffect } from 'react'
import * as echarts from 'echarts';
import './index.less'
const ChartComponent = memo(() => {
    useEffect(() => { chartInit() }, [document.documentElement.style.fontSize]);
    const chartInit = () => {
        const mychart = echarts.init(document.getElementById('chart'));
        mychart.setOption({
            title: {
                show: true,
                text: '相关运行曲线',
                textStyle: {
                    color: '#00CCFF',
                    fontSize: 24
                },
                padding: [25, 10, 10, 25]
            },
            xAxis: {
                // type: 'time',
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                // 去掉网格线
                splitLine: {
                    show: false
                },
                //去掉x轴刻度线
                axisTick: {
                    show: false
                },
                // 坐标轴文本颜色
                axisLable: {
                    textStyle: {
                        color: '#00CCFF'
                    }
                },
                //刻度线标签颜色
                axisLine: {
                    lineStyle: {
                        color: '#00CCFF', // 颜色
                    }
                },
            },
            yAxis: {
                type: 'value',
                // 坐标自适应
                scale: false,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0, color: 'rgba(0,223,255,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(0,188,255,0.00)' // 100% 处的颜色
                            }
                        ]),// 颜色
                    }
                },
                axisLable: {
                    textStyle: {
                        color: 'red'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#00CCFF',
                    }
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            series: [
                {
                    name: '1',
                    data: [2, 7, 10, 13, 9, 8, 6],
                    type: 'line',
                    smooth: true,
                    symbolSize: 0,// 折线点大小
                    areaStyle: {
                        //折线区域的背景渐变颜色
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0, color: '#00CCFF' // 0% 处的颜色
                            }, {
                                offset: 0.15, color: 'rgba(0,204,255,0.7)' // 15% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(1,22,52,0)' // 100% 处的颜色
                            }
                        ]),
                    },
                    itemStyle: {
                        normal: {
                            // 点的颜色
                            color: "#fff",
                            fontSize: 14,
                            lineStyle: {
                                //折线宽度
                                width: 3,
                                //折线颜色
                                color: '#00CCFF'
                            },
                        },
                        emphasis: {
                            //鼠标经过时折点小圆圈样式
                            borderColor: "rgba(0,196,132,0.2)",
                            borderWidth: 10,
                        },
                    },
                },
            ],
        });
        // 屏幕大小变化，图标大小自动跟随变化
        window.addEventListener('resize', () => {
            mychart.resize();
        })
    }
    return (
        <div id="chart" />
    )
})

export default ChartComponent
